<template>
  <el-container>
    <el-header style="height: 100%;border: 1px">
      <el-menu class="el-menu-demo" mode="horizontal" :router="true">
        <el-col :span="6" style="margin: 0px 43% 0px 10px ">
          <h2 style="font-size: 35px">:D豆嗲</h2>
        </el-col>
        <el-menu-item index="/homepage.html" style="padding: 40px 5px 62px 5px">首页</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/storeShowOrders.html" style="padding: 40px 5px 62px 5px">我的订单</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/modifyPassword.html" style="padding: 40px 5px 62px 5px">修改密码</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item  style="padding: 40px 5px 62px 5px" @click="logout">注销</el-menu-item>
      </el-menu>
    </el-header>

  <el-card style="margin: 20px 140px 10px 150px;">
    <div slot="header" style="line-height: 40px;">
      <h1>修改密码</h1>
    </div>
    <el-form ref="modifyPasswordForm" :rules="rules" label-width="80px" :model="modifyPasswordForm">
      <el-form-item label="ID" v-show="false">
        <el-input v-model="modifyPasswordForm.id"></el-input>
      </el-form-item>
      <el-form-item label="原密码" prop="password">
        <el-input show-password v-model.trim="modifyPasswordForm.password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input show-password  v-model.trim="modifyPasswordForm.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="cfmPassword">
        <el-input show-password v-model.trim="modifyPasswordForm.cfmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
    <br><br>
    <el-footer  style="padding:0px 0px 350px 0px">
      <el-row>
        <img width="35px" height="35px" style="margin: 50px 0px 0px -60%" src="../img/many.png">
        <h1 style="color: white;margin: -70px 42% 0px 0px ">品类齐全，轻松购物</h1>
        <el-col :span="2" style="margin: -50px 0px 0px 37% ">
          <img width="35px" height="35px" src="../img/fast.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0% 0px 0px">多仓直发，极速配送</h1>
        <el-col :span="2" style="margin: -53px 0px 0px 200px ">
          <img width="33px" height="33px" src="../img/good.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0px 0px 40%">正品好货，精致服务</h1>
      </el-row>
      <el-divider></el-divider>
      <img width="50px" height="50px" src="../img/touxiang.png">
      <el-breadcrumb>
        <el-breadcrumb-item style="font-size: 18px;margin-left: 30px">关于我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">联系我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">人才招聘</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">商家入驻</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">广告服务</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">手机京东</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">友情链接</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">销售联盟</el-breadcrumb-item>
      </el-breadcrumb>
      <h1 style="color: #8a8a8a;font-size: 15px;margin: 0px 20px 0px 0px">Copyright &copy; 2021 豆嗲:D.com版权所有</h1>
    </el-footer>
  </el-container>


</template>

<script>
import loginApi from "@/http/loginApi";

export default {
name: "ModifyPassword",
  data() {
    let compPass = (rule,value,callback)=>{
      if (value != this.modifyPasswordForm.newPassword){
        callback(new Error());
      }else{
        callback();
      }
    }
    return {
      admins:[],
      adminNames:[],
      modifyPasswordForm: {},
      rules: {
        password: [
          {required: true, message: '请输入原密码', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
        ],
        cfmPassword: [
          {required: true, message: '请确认新密码', trigger: 'blur'},
          {validator: compPass,message: '两次密码输入必须一致！', trigger: 'blur'},
        ]
      }
    }
  },
  created() {
  },
  methods: {
    onSubmit() {
      this.$refs['modifyPasswordForm'].validate((valid) => {
        if (valid) {
          // this.modifyPasswordForm.dormAdmins = this.admins.join(",");
          console.log('submit!', this.modifyPasswordForm);
          this.modifyPasswordForm.id = this.$store.state.userInfo.id;
          this.modifyPasswordForm.type = this.$store.state.userInfo.type;
          loginApi.modifyPassword(this.modifyPasswordForm).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              this.$router.replace("/login.html")
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;//阻止表单提交
        }
      });
    },
    onReset() {
      this.$refs["modifyPasswordForm"].resetFields();
    },
    logout(){
      loginApi.logout().then(res => {
        if (res.data.code == 200) {
          this.$message.info(res.data.msg);
          sessionStorage.clear();
          this.$router.replace("/login.html");
        }
      })
    },
  }
}
</script>

<style scoped>

</style>